<!--
 * @Description: 自定义流程流程处理、流程审批
 * @Author: wangwangwang
 * @Date: 2020-09-07 14:44:21
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-09-08 17:42:43
-->
<template>
  <div class="pages_content taskCenter">
    <el-container>
      <div id="print-container" ref="print" class="print" style="background: #fff;width: 100%; width:1075px;display:none">
        <h1 style="text-align: center;width: 100%;">{{flowsTitleData.title}}</h1>
        <div style="display:flex;width: 100%;justify-content: space-between;">
          <div> 单据号码：{{urlData.receiptNumber}}</div>
          <div> 制单日期：{{urlData.createTime}}</div>
          <div> 发起人：{{urlData.createUserName}}</div>
        </div>
        <div style="wodth:100%;padding:20px 0">
          <table class="table" style="width:100%; border-collapse: collapse; text-align: center;">
            <tr>
              <td style="border: 1px solid #808080;width:16%;height:50px">发起人</td>
              <td style="border: 1px solid  #808080;width:17%">{{urlData.createUserName}}</td>
              <td style="border: 1px solid #808080;width:16%">审核状态</td>
              <td style="border: 1px solid  #808080;width:17%">{{taskTypeText[urlData.taskStatus*1]}}</td>
              <td style="border: 1px solid  #808080;width:16%">单据编码</td>
              <td style="border: 1px solid  #808080;width:17%">{{urlData.receiptNumber}}</td>
            </tr>
            <template v-for="item in Math.ceil((printData.length)/3)">
              <tr :key="item+'tr'">
                <template v-for="(item2,index2) in printData.slice((item-1)*3,(item-1)*3+3)">
                  <td :key="index2+'td1'" style="border: 1px solid #808080;width:16%;height:50px">{{item2.title}}</td>
                  <td :key="index2+'td2'" style="border: 1px solid #808080;width:17%;height:50px">{{item2.value}}</td>
                </template>
              </tr>
            </template>
            <tr>
              <td style="border: 1px solid  #808080;width:16%;height:60px">序号</td>
              <td style="border: 1px solid  #808080;width:17%">状态</td>
              <td style="border: 1px solid  #808080;width:16%">全路径</td>
              <td style="border: 1px solid  #808080;width:17%">对接人</td>
              <td style="border: 1px solid  #808080;width:16%" colspan="2">事项描述</td>
            </tr>
            <tr v-for="(item,index) in tableData" :key="index">
              <td style="border: 1px solid  #808080;width:16%;height:40px">{{index+1}}</td>
              <td style="border: 1px solid  #808080;width:17%">{{flowsStatus[item.approvalStatus]}}</td>
              <td style="border: 1px solid  #808080;width:16%">{{item.nodeName}}</td>
              <td style="border: 1px solid  #808080;width:17%">{{item.userName}}</td>
              <td style="border: 1px solid  #808080;width:16%" colspan="2">{{item.approvalOptions}}</td>
            </tr>
          </table>
        </div>
      </div>
      <el-header>
        <div class=" handle-container">
          <el-row type="flex" align="middle">
            <el-col :span="8">
              <el-button :disabled="isReadOnly2" size="medium" class="bottom_all" style="margin-left: 0;" @click="saveSubmit()">保存</el-button>
              <el-button :disabled="!isReadOnly || isReadOnly2" size="medium" class="bottom_all_two" @click="sendSubmit()">提交</el-button>
              <el-button v-if="hasBackPermiss" :disabled="!isReadOnly" size="medium" class="bottom_three" style="margin-left: 24px;" @click="handleBackEnd">撤销</el-button>
            </el-col>
            <el-col style="text-align:right;" :span="16">
              <el-button :disabled="!isReadOnly" size="mini" icon="el-icon-takeaway-box" type="text" class="bottom_text" @click="surePrint">打印</el-button>
              <el-button :disabled="!isReadOnly" size="mini" icon="el-icon-position" type="text" class="bottom_text" @click="handleCC">抄送</el-button>
              <el-button :disabled="!isReadOnly || isReadOnly2" size="mini" icon="el-icon-tickets" type="text" class="bottom_text" @click="handleAssign">交办</el-button>
              <el-button :disabled="!isReadOnly || isReadOnly2" size="mini" icon="el-icon-d-arrow-right" type="text" class="bottom_text" @click="handleBackUp">回退</el-button>
              <el-button :disabled="!isReadOnly || isReadOnly2" size="mini" icon="el-icon-document" type="text" class="bottom_text" @click="handleAssist">协审</el-button>
              <el-button :disabled="!isReadOnly || isReadOnly2" size="mini" icon="el-icon-collection-tag" type="text" class="bottom_text" @click="handleNode">加减签</el-button>
              <el-button :disabled="!isReadOnly" size="mini" icon="el-icon-set-up" type="text" class="bottom_text" @click="handleNodeImage">流程图</el-button>
              <el-button :disabled="!isReadOnly" size="mini" icon="el-icon-star-off" type="text" class="bottom_text" @click="handleCollection">收藏任务</el-button>
              <el-button size="mini" icon="el-icon-s-promotion" type="text" class="bottom_text" @click="showAssociated">关联流程</el-button>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main class="tc-info">
        <div class=" main-container">
          <div class="flows-title">
            {{flowsTitleData.title}}
          </div>
          <div class="flows-header-container">
            <el-row type="flex">
              <el-col>
                单据号码：{{urlData.receiptNumber}} <span style="margin-left: 60px;">制单日期：{{urlData.createTime}}</span>
              </el-col>
              <el-col style="text-align:right;">
                发起人：{{urlData.createUserName}} <span style="margin-left: 60px;">状态：{{taskTypeText[urlData.taskStatus*1]}}</span>
              </el-col>
            </el-row>
          </div>
          <div class="flows-form-container">
            <div v-for="item in flowsFormData" :key="item.id" class="from-row">
              <el-row>
                <template v-for="(list,index) in item.children">
                  <el-col v-if="!list.isEmpty" :key="index" :style="{width:`${(list.width/defaultColNum)*100}%`}">
                    <el-form :disabled="isReadOnly">
                      <template v-for="(list2, index2) in list.children">
                        <el-form-item v-if="list2.type" :key="index2" :label-width="`${list2.titleWidth/(list2.titleWidth*1+list2.contentWidth*1)*100}%`" :label="list2.title">
                          <el-input v-if="list2.type===1||list2.type===2||list2.type===8" v-model="list2.value" resize='none' type="textarea" :rows="list2.rowHeight"></el-input>
                          <div v-if="list2.type===3">
                            <el-radio-group v-model="list2.value">
                              <el-radio v-for="list3 in list2.dicList" :key="list3.id" :label="list3.id">{{list3.itemName}}</el-radio>
                            </el-radio-group>
                          </div>
                          <!-- <el-checkbox-group v-if="list2.type===4" v-model="list2.value" >
                            <el-checkbox v-for="list3 in list2.dicList" :key="list3.id" :value="list3.itemValue" :label="list3.itemName"></el-checkbox>
                          </el-checkbox-group> -->
                          <el-select v-if="list2.type===4" v-model="list2.value" multiple style="width:100%;" placeholder="请选择">
                            <el-option v-for="list3 in list2.dicList" :key="list3.id" :label="list3.itemName" :value="list3.id" />
                          </el-select>
                          <el-select v-if="list2.type===5" v-model="list2.value" style="width:100%;" placeholder="请选择">
                            <el-option v-for="list3 in list2.dicList" :key="list3.id" :label="list3.itemName" :value="list3.id" />
                          </el-select>
                          <el-date-picker v-if="list2.type===6" v-model="list2.value" style="width:100%;" :type="list2.timeType==='1'?'date':'datetime'" placeholder="选择日期">
                          </el-date-picker>
                          <div v-if="list2.type===7">
                            <FileComponent fileCode="flowsFile" :files="files" />
                          </div>
                          <div v-if="list2.type===11">
                            <div style="cursor: pointer;" @click="handleClick(list2)">{{list2.personName || '请选择'}}</div>
                          </div>
                        </el-form-item>
                      </template>
                    </el-form>
                  </el-col>
                </template>
              </el-row>
            </div>
          </div>
          <FlowsNodeList v-show="tableData.length" :tableData="tableData" />
          <OperationModal :showSendVisible="showSendVisible" disabled="true" @handleSure="handleSure" @handleCancel="handleCancel" />
        </div>
      </el-main>
    </el-container>
    <personModel :title="title" :visible='visible' :choisedDatas="choisedData" @closeModel='closeModel' @getPerson='getPerson' />
    <Flowbackup :visible="backVisible" :tableData="backTableData" @closeModel="closeBack" @hanldeSure='hanldeSure' />
    <HandleNode :visible='nodeVisible' :sendTable="tableData" @hanldeClose="nodeVisible=false" @hanldeSure="hanldeSure2" />
    <FlowMap :visible='mapVisible' :nodeDataSource="allNode" @closeModel="mapVisible=false" />
    <el-dialog v-dialogDrag :visible.sync="visible2" width="90%">
      <span slot="title">关联流程</span>
      <div>
        已关联任务
        <div class="dialoginfo">
          <div>
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width: 100%" :data="dataSource2" tooltip-effect="dark">
              <el-table-column prop="code" label="编码" align="center"></el-table-column>
              <el-table-column prop="taskTypeName" label="任务分类" align="center"></el-table-column>
              <el-table-column prop="taskName" label="名称" align="center"></el-table-column>
              <el-table-column prop="createUserName" label="提交人" align="center"></el-table-column>
              <el-table-column prop="userOrganizationName" label="提交人机构" align="center"></el-table-column>
              <el-table-column prop="userDepartmentName" label="提交人部门" align="center"></el-table-column>
              <el-table-column prop="taskStatus" label="状态" align="center">
                <template slot-scope="scope">
                  <el-tag v-if='scope.row.taskStatus===1' type="success">待提交</el-tag>
                  <el-tag v-if='scope.row.taskStatus===2' type="info">待审批</el-tag>
                  <el-tag v-if='scope.row.taskStatus===3' type="warning">已结束</el-tag>
                  <el-tag v-if='scope.row.taskStatus===4' type="danger">已撤销</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="提交时间" align="center"></el-table-column>
              <el-table-column prop="timekeeping" label="是否计时" align="center">
                <template slot-scope="scope">
                  <span>{{scope.row.timekeeping*1===1?'计时':'非计时'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="updateUserName" label="执行人" align="center"></el-table-column>
              <el-table-column prop="updateTime" label="执行时间" align="center"></el-table-column>
              <el-table-column prop="intergalCount" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button class="bottom_all" @click="handleDetails(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <div style="display:flex; align-items:center;">
              <div class="top_page_totle">总共{{ total2 }}条</div>
              <el-pagination :current-page.sync="page2" :page-size="10" layout="prev,pager,next" :total="total2" @current-change="initData2()"></el-pagination>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" size="medium" @click="visible2=false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getNodeList, getTaskInstance, saveWorkFlow, submitApproval, addApprover, assignmentApprover, cancelTask, backPrefixNode, editTaskContent } from '@/api/task/flows';
import { taskJoinQueryPage } from '@/api/api';
import { taskCollectByUser } from '@/api/task/taskType.js';
import { getUserInfo } from "@/utils/auth";
import personModel from '@/components/ChoisePerson/personModel';
import OperationModal from '@/components/WorkFlow/OperationModal';
import FileComponent from '@/components/File/fileComponent';
import FlowsNodeList from '@/components/WorkFlow/flowsNodeList';
import Flowbackup from '@/components/WorkFlow/flowbackup';
import HandleNode from '@/components/WorkFlow/handleNode';
import FlowMap from '@/components/WorkFlow/flowMap';
import addTab from "@/common/addTab.js";
export default {
  components: {
    OperationModal,
    FileComponent,
    FlowsNodeList,
    personModel,
    Flowbackup,
    HandleNode,
    FlowMap,
  },
  data() {
    return {
      visible: false,
      showSendVisible: false,
      backVisible: false,
      tableData: [],
      flowsFormData: [],
      flowsTitleData: {},
      previewData: [],
      defaultColNum: 8,
      urlData: {},
      flowsInfo: {},
      isReadOnly: true,
      isReadOnly2: false,
      files: [],
      flowsStatus: ['未审批', '待处理', '审批通过', '审批不通过', '已撤销'],
      taskTypeText: ['发起', '已保存', '审批中', '已完成', '撤销', '不通过'],
      handleType: 1,
      title: '',
      backTableData: [],
      hasBackPermiss: false,
      nodeVisible: false,
      mapVisible: false,
      allNode: [],
      printData: [],
      personType: 1,
      choisedCode: '',
      choisedData: [],
      visible2: false,
      page2: 1,
      total2: 0,
      dataSource2: [],
    }
  },
  methods: {
    showAssociated () {
      this.visible2 = true;
      this.initData2();
    },
    initData2 () {
      taskJoinQueryPage({id: this.urlData.processTaskId,page: this.page2, pageSize: 10}).then(res => {
        if (res.code === 1001) {
          this.dataSource2 = res.data.data;
          this.total2 = res.data.totalRows;
        }
      })
    },
    handleDetails (data) {
      if (data.formType === 1) { // 自定义表单
        const query = {
          processManagerId: data.processManagerId,
          processTaskId: data.id,
          processVersionId: data.versionNumber,
          receiptNumber: data.receiptNumber,
          taskName: data.taskName,
          taskStatus: data.taskStatus,
          createTime: data.createTime,
          createUserName: data.createUserName,
          type: 2,
          taskType: 5,
          isReadOnly: 1
        }
        /**
         * @Description: 如果是待发流程往发起跳转
         * @param {*}
         * @Author: wangwangwang
         */
        this.$router.push({ name: 'taskDetails', query });
        return
      }
      const query = {
        processManagerId: data.processManagerId,
        processTaskId: data.id,
        processVersionId: data.versionNumber,
        receiptNumber: data.receiptNumber,
        dataContent: data.dataContent,
        createTime: data.createTime,
        createUserName: data.createUserName,
        taskName: data.taskName,
        taskStatus: data.taskStatus,
        type: 2, // 1为发起 2为详情审批
        taskType: 5,
        isReadOnly: 1,
      }
      this.$router.push({ name: data.dataSource, query });
    },
    handleClick (data) {
      this.visible = true;
      this.personType = 2;
      this.choisedCode = data.code;
      this.choisedData = data.value.map(item => ({id: item.userId,name: item.userName}));
    },
    /**
    * @Description 打印
    */
    surePrint() {
      let print = document.getElementsByClassName("print")[0].innerHTML  //获取目标区域
      const iframeDom = document.createElement('iframe')
      const attrObj = {
        height: 0,
        width: 0,
        border: 0,
        id: 'iframe'
      }
      const styleObj = {
        position: 'fixed',
        'z-index': '-999',
      }
      Object.entries(attrObj).forEach(([key, value]) => iframeDom.setAttribute(key, value))
      Object.entries(styleObj).forEach(([key, value]) => { iframeDom.style[key] = value })
      document.body.appendChild(iframeDom);
      const iframeDocs = iframeDom.contentWindow.document
      iframeDocs.write(print)
      window.setTimeout(function () {
        iframeDom.contentWindow.print()
        document.body.removeChild(iframeDom)
      }, 1000)
    },
    closeBack() {
      this.backVisible = false;
    },
    hanldeSure(data) {
      const newData = this.tableData.find((item) => item.approvalStatus === 1);
      if (!newData.id) {
        this.$message.warning('未找到当前审批节点');
        return
      }
      const params = {
        sourceNodeId: newData.id,
        targetNodeId: data.id,
      }
      console.log(params)
      backPrefixNode(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('回退成功');
          addTab.$emit("remove", this.$route.name);
        }
      })
    },
    /**
     * @Description: 加减签
     * @Param: 通过对比进行判断
     * @Author: wangwangwang
     * @param {*} data
     */
    hanldeSure2(data) {
      const newData = this.tableData.find((item) => item.approvalStatus === 1);
      const allHas = this.tableData.filter(item => data.some(items => items.id === item.id));
      // 增加的数据
      const addData = data.filter(item => !allHas.some(items => items.id === item.id));
      // 减少的数据
      const deleteData = this.tableData.filter(item => !allHas.some(items => items.id === item.id));
      if (addData.length) {
        const params = addData.map(item => ({ userId: item.id, userType: 2, userName: item.userName, processInstanceId: this.flowsInfo.id, processInstanceNodeId: newData.id }))
        addApprover(params).then(res => {
          if (res.code === 1001) {
            this.$message.success('添加协审成功！！！');
            this.visible = false;
          }
        })
      }
      if (deleteData.length) {
        console.log(1111)
      }
    },
    closeModel() {
      this.visible = false;
    },
    getPerson(data) {
      if (this.personType === 2) {
        this.flowsFormData.forEach((item) => {
          const { children } = item;
          children.forEach((item2) => {
            const { children } = item2;
            children.forEach((item3) => {
              if (item3.type === 11 && this.choisedCode === item3.code) {
                item3.personName = data.map(item => item.name).join(',');
                item3.value = data.map(item => ({userId: item.id, userName: item.name}));
              }
            })
          })
        });
        this.visible = false;
        return
      }
      const newData = this.tableData.find((item) => item.approvalStatus === 1);
      if (!newData.id) {
        this.$message.warning('未找到当前审批节点');
        return
      }
      if (this.handleType === 1) { // 抄送
        const params = data.map(item => ({ userId: item.id, userType: 3, userName: item.name, processInstanceId: this.flowsInfo.id, processInstanceNodeId: newData.id }))
        addApprover(params).then(res => {
          if (res.code === 1001) {
            this.$message.success('抄送成功！！！');
            this.visible = false;
          }
        })
      }
      if (this.handleType === 2) { // 协审
        const params = data.map(item => ({ userId: item.id, userType: 2, userName: item.name, processInstanceId: this.flowsInfo.id, processInstanceNodeId: newData.id }))
        addApprover(params).then(res => {
          if (res.code === 1001) {
            this.$message.success('添加协审成功！！！');
            this.visible = false;
          }
        })
      }
      if (this.handleType === 3) { // 交办
        if (data.length > 1) {
          this.$message.warning('交办人员不能大于1位');
          return
        }
        const params = {
          processInstanceNodeId: newData.id,
          userIds: data[0].id,
          userName: data[0].name,
        }
        assignmentApprover(params).then(res => {
          if (res.code === 1001) {
            this.visible = false;
            this.$message.success('交办成功！！！');
            setTimeout(() => {
              addTab.$emit("remove", this.$route.name);
            }, 1000)
          }
        })
      }
    },
    /**
     * @Description: 撤销
     * @Param: 
     * @Author: wangwangwang
     */
    handleBackEnd() {
      this.$confirm('确定撤销此流程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: 'warning'
      }).then(() => {
        const params = {
          taskId: this.urlData.processTaskId,
        }
        cancelTask(params).then(res => {
          if (res.code === 1001) {
            this.$message.success('撤销成功', 1, () => {
              addTab.$emit("remove", this.$route.name);
            });
          }
        })
      }).catch(() => {
      });
    },
    /**
     * @Description: 抄送
     * @Param: 
     * @Author: wangwangwang
     */
    handleCC() {
      this.visible = true;
      this.handleType = 1;
      this.personType = 1;
      this.title = '选择抄送人员'
    },
    /**
     * @Description: 交办
     * @Param: 
     * @Author: wangwangwang
     */
    handleAssign() {
      this.visible = true;
      this.personType = 1;
      this.handleType = 3;
      this.title = '选择交办人员'
    },
    /**
     * @Description: 回退
     * @Param: 
     * @Author: wangwangwang
     */
    handleBackUp() {
      this.backTableData = this.tableData.filter(item => item.approvalStatus === 2);
      this.backVisible = true;
    },
    /**
     * @Description: 协审
     * @Param: 
     * @Author: wangwangwang
     */
    handleAssist() {
      this.visible = true;
      this.personType = 1;
      this.handleType = 2;
      this.title = '选择协审人员'
    },
    /**
     * @Description: 加减签
     * @Param: 
     * @Author: wangwangwang
     */
    handleNode() {
      this.nodeVisible = true;
    },
    handleNodeImage() {
      this.mapVisible = true;
    },
    handleCollection() {
      const params = [{ receiptNumber: this.urlData.receiptNumber }]
      taskCollectByUser(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('收藏成功');
        }
      })
    },
    initData() {
      const params = { ...this.$route.query };
      getNodeList(params).then(res => {
        if (res.code === 1001) {
          this.allNode = JSON.parse(JSON.stringify(res.data));
          res.data.pop();
          const newData = [];
          res.data.forEach(item => {
            item.instanceLogsList.forEach(items => {
              const data = {
                nodeName: item.nodeName,
                userName: items.userName,
                multiApprovalType: item.multiApprovalType,
                approvalOptions: items.approvalOptions,
                handlerTime: items.handlerTime,
                approvalStatus: items.approvalStatus || item.approvalStatus,
                processInstanceId: item.processInstanceId,
                id: item.id,
              }
              newData.push(data);
            })
          });
          this.tableData = newData;
          const firstPerson = res.data[0].instanceLogsList[0].userId;
          if (firstPerson === getUserInfo().userId) this.hasBackPermiss = true;
        }
      });
      getTaskInstance(params).then(res => {
        if (res.code === 1001) {
          this.flowsInfo = res.data;
          this.previewData = JSON.parse(res.data.formStructureData);
          this.flowsTitleData = this.previewData[0].children[0].children[0]; // 构造流程标题
          this.flowsFormData = this.previewData.filter((item, index) => { // 构造流程form数据
            if (index !== 0) {
              return item
            }
          });
          /**构造打印数据*/
          let newArr = this.getPrintData(this.flowsFormData)
          newArr = newArr.reduce((arr, cur) => {
            if (cur.children.length == 0) {
              if (cur.type == 4) {
                let arr1 = cur.dicList.filter(res => (
                  cur.value.some(res1 => (res.id == res1))
                )).map(res => (res.itemName)).join(',')
                cur.value = arr1
              }
              if (cur.type == 6) {
                cur.value = cur.value ? new Date(cur.value).Format('yyyy-MM-dd hh:mm:ss') : ''
              }
              if (cur.type == 3 || cur.type == 5) {
                cur.value = cur.dicList.find(res => (res.id == cur.value))?.itemName
              }
              arr.push({ title: cur.title, value: cur.value })
            }
            return arr
          }, [])
          this.printData = newArr;
        }
      })
    },
    getPrintData(data) {
      return data.reduce((arr = [], { title = '', value = '', type = '', dicList = [], children = [] }) => {
        return arr.concat([{ title, value, children, dicList, type }], this.getPrintData(children))
      }, [])
    },
    saveSubmit() {
      const params = {
        taskType: 1,
        processManagerId: this.urlData.id,
        processManagerName: this.urlData.name,
        taskName: this.flowsTitleData.title,
        taskStatus: 1,
        receiptNumber: this.urlData.receiptNumber,
        taskFlow: {
          content: JSON.stringify(this.previewData),
        },
        submissionTime: "",
      }
      const data = {};
      /**
      * @Description: 构造提交数据
      * @Param: 
      * @Author: wangwangwang
      */
      this.flowsFormData.forEach((item) => {
        const { children } = item;
        children.forEach((item2) => {
          const { children } = item2;
          children.forEach((item3) => {
            if (!item3.isEmpty && item3.code) {
              if (item3.type == 11) {
                data[`matters_${item3.code}`] = item3.value;
                data[`matters_${item3.code}_type`] = 'string';
                data[`matters_${item3.code}_old`] = '';
              } else {
                data[item3.code] = item3.value;
                data[`${item3.code}_type`] = 'string';
                data[`${item3.code}_old`] = '';
              }
            }
          })
        })
      });
      /**
       * @Description: 强制编辑
       * @param {*} this
       * @Author: wangwangwang
       */
      if (this.$route.query.type * 1 === 10) {
        const params2 = {
          processTaskContent: JSON.stringify(data),
          processTaskId: this.urlData.processTaskId,
          processTaskName: this.flowsTitleData.title,
          formStructureData: JSON.stringify(this.previewData),
        }
        editTaskContent(params2).then(res => {
          if (res.code === 1001) {
            this.$message.success('强制编辑成功')
          }
        })
        return
      }
      saveWorkFlow(params).then(res => {
        if (res.code === 1001) {
          this.$message.success('保存成功')
        }
      })
    },
    sendSubmit() {
      this.showSendVisible = true;
    },
    /**
     * @Description: 流程提交
     * @Param: 
     * @Author: wangwangwang
     */
    handleSure(formData) {
      const data = {};
      /**
      * @Description: 构造提交数据
      * @Param: 
      * @Author: wangwangwang
      */
      this.flowsFormData.forEach((item) => {
        const { children } = item;
        children.forEach((item2) => {
          const { children } = item2;
          children.forEach((item3) => {
            if (!item3.isEmpty && item3.code) {
              if (item3.type == 11) {
                data[`matters_${item3.code}`] = item3.value;
                data[`matters_${item3.code}_type`] = 'string';
                data[`matters_${item3.code}_old`] = '';
              } else {
                data[item3.code] = item3.value;
                data[`${item3.code}_type`] = 'string';
                data[`${item3.code}_old`] = '';
              }
            }
          })
        })
      });
      const newData = this.tableData.find((item) => item.approvalStatus === 1);
      if (!newData.id) {
        this.$message.warning('未找到当前审批节点');
        return
      }
      const params = {
        approvalOptions: formData.approvalOptions,
        approvalStatus: formData.approvalStatus,
        processInstanceId: this.flowsInfo.id,
        processInstanceNodeId: newData.id,
        processTaskContent: JSON.stringify(data),
        updateFormData: '',
      }
      submitApproval(params).then(res => {
        if (res.code === 1001) {
          this.$message({
            message: '提交成功！！！',
            type: 'success'
          })
          this.showSendVisible = false;
          addTab.$emit("remove", this.$route.name);
        }
      })
      console.log(102, params)
    },
    handleCancel() {
      this.showSendVisible = false;
    }
  },
  mounted() {
    this.urlData = this.$route.query;
    if (this.urlData.type * 1 === 10) this.isReadOnly = false;
    this.isReadOnly2 = this.urlData.isReadOnly*1===1;
    this.initData();
  }
}
</script>
<style scoped lang="scss">
.handle-container {
  border-radius: 4px;
  background: #fff;
  width: 100%;
}
.main-container {
  border-radius: 4px;
  background: #fff;
  .flows-title {
    padding: 10px 0 15px;
    text-align: center;
    font-size: calc(#{$font_size} + 8px);
  }
  .flows-header-container {
    border-bottom: 1px solid #e1e5ed;
    padding-bottom: 15px;
  }
}
.taskCenter {
  box-shadow: 0px 0px 0px;
  background: rgba(0, 0, 0, 0);
  .el-header {
    box-shadow: 0px 0px 6px rgba(0, 167, 84, 0.12);
    background: #ffffff !important;
    border-radius: 4px;
  }
  .el-main {
    box-shadow: 0px 0px 6px rgba(0, 167, 84, 0.12);
    margin-top: 20px;
    background: #fff;
  }
}
.flows-form-container {
  margin-top: 20px;
}
</style>

